import { useState } from "react";


// let nextId = 0;
// 1. 向数组中添加元素 concat ...
// 2. 删除： filter
// 3. 修改： map if index
// 4. 插入： insertIndex slice
// 5. 其它情况 如排序 翻转
// export default function StateArray() {
//     const [name, setName] = useState('');
//     const [list, setList] = useState([]);
//     const handleChange = (e) => {
//         setName(e.target.value);
//     }

//     const handleClick = () => {
//         if (name.trim()) {
//             setList([
//                 ...list,
//                 { id: nextId++, name: name }
//             ])

//             setName('');
//         }
//     }

//     // 使用过滤的方式将元素删除
//     const handleDelete = (id) => {
//         const filterList = list.filter(item => item.id !== id);
//         setList(filterList);
//     }

//     const handleInsert = () => {
//         if (!name.trim()) return;
//         const insertIndex = 1;
//         setList([
//             ...list.slice(0, insertIndex),
//             {
//                 id: nextId++,
//                 name: name
//             },
//             ...list.slice(insertIndex)
//         ])
//     }

//     const handleModify = () => {
//         const newList = list.map((item, index) => {
//             if (index % 2 !== 0) {
//                 return {
//                     ...item,
//                     name: name
//                 }
//             }
//             return item;
//         })

//         setList(newList);
//     }

//     const handleReverse = () => {
//         const newList = [...list];
//         newList.reverse();
//         setList(newList);
//     }

//     return (
//         <div>
//             <h1>振奋人心的雕塑家们：</h1>
//             <input onChange={handleChange} />
//             <button onClick={handleClick}>添加</button>
//             <button onClick={handleInsert}>插入到下标1处</button>
//             <button onClick={handleModify}>修改奇数项的值</button>
//             <button onClick={handleReverse}>翻转</button>
//             <ul>
//                 {list.map(item => <li key={item.id}>
//                     <span>{item.name}</span>
//                     <button onClick={() => handleDelete(item.id)}>删除</button>
//                 </li>)}
//             </ul>
//         </div>
//     )
// } 

let nextId = 3;
const initialList = [
    { id: 0, title: 'Big Bellies', seen: false },
    { id: 1, title: 'Lunar Landscape', seen: false },
    { id: 2, title: 'Terracotta Army', seen: true },
];

export default function StateArray() {
    const [myList, setMyList] = useState(initialList);
    const [yourList, setYourList] = useState(
        initialList
    );

    function handleToggleMyList(artworkId, nextSeen) {
        setMyList(myList.map(artwork => {
            if (artwork.id === artworkId) {
                // 创建包含变更的*新*对象
                return { ...artwork, seen: nextSeen };
            } else {
                // 没有变更
                return artwork;
            }
        }));
    }

    function handleToggleYourList(artworkId, nextSeen) {
        setYourList(yourList.map(artwork => {
            if (artwork.id === artworkId) {
                // 创建包含变更的*新*对象
                return { ...artwork, seen: nextSeen };
            } else {
                // 没有变更
                return artwork;
            }
        }));
    }

    return (
        <>
            <h1>艺术愿望清单</h1>
            <h2>我想看的艺术清单：</h2>
            <ItemList
                artworks={myList}
                onToggle={handleToggleMyList} />
            <h2>你想看的艺术清单：</h2>
            <ItemList
                artworks={yourList}
                onToggle={handleToggleYourList} />
        </>
    );
}

function ItemList({ artworks, onToggle }) {
    return (
        <ul>
            {artworks.map(artwork => (
                <li key={artwork.id}>
                    <label>
                        <input
                            type="checkbox"
                            checked={artwork.seen}
                            onChange={e => {
                                onToggle(
                                    artwork.id,
                                    e.target.checked
                                );
                            }}
                        />
                        {artwork.title}
                    </label>
                </li>
            ))}
        </ul>
    );
}